<template>
    <div>
        <div class="common-header-wrap">
            <mt-header title="仓储详情" class="common-header">
                <mt-button slot="left" icon="back" @click="$router.go(-1)"></mt-button>
            </mt-header>
        </div>
        <img class="storage-detail-img" src="../../../assets/image/tea/5.jpg">
        <div class="storage-detail-name">
            <div class="storage-detail-title">
                大华仓储
            </div>
            <div class="storage-detail-information">
                <div class="storage-detail-information-price">
                    ￥200.00/m²/月
                </div>
                <div class="storage-detail-information-num">3780m²已售</div>
            </div>
        </div>
        <div class="storage-detail-content">
            <div class="storage-detail-content-head">
                <div class="storage-detail-content-head-title">购买体积</div>
                <div class="storage-detail-content-head-content">
                    <div class="storage-detail-content-head-num">{{rangeValue}}m²</div>
                    <img class="storage-detail-content-head-img" src="../../../assets/image/home/icon-edit.png">
                </div>
            </div>
            <mt-range
                    v-model="rangeValue"
                    :min="0"
                    :max="200"
                    :bar-height="3"
            ></mt-range>
            <div class="detail-num">
                <div class="detail-num-font">0m²</div>
                <div class="detail-num-font">200m²</div>
            </div>

            <div class="info-body" id="info-body">
                <p>购买时长(月)</p>
                <div class="ui-number">
                    <div
                            class="reduce ui-common"
                            @click.stop="reduceNumber()"
                            v-bind:class="{ 'reduce-opacity': numbers <= 1 }"
                    >
                        -
                    </div>
                    <input
                            type="number"
                            min="1"
                            class="number"
                            value="1"
                            v-model="numbers"
                            readonly="true"
                    />
                    <div class="add ui-common" @click.stop="addNumber()">+</div>
                </div>
            </div>
            <div>
                <div class="self-check">
                    <mt-checklist
                            style="padding: 0"
                            v-model="insurance"
                            :options="['保险']">
                    </mt-checklist>
                    <div class="self-check-price">¥99</div>
                </div>
            </div>
            <div class="storage-detail-total">
                总计：¥40099.00
            </div>
        </div>
        <div class="storage-title-main">
            — 仓储信息 —
        </div>
        <div class="storage-detail-main">
            <div class="storage-detail-describe">大华仓储</div>
            <mt-cell title="总库存体积" value="10000m²"></mt-cell>
<!--            <mt-cell title="仓储所在地" value="" ></mt-cell>-->
            <mt-cell title="服务电话" value="暂未提供" ></mt-cell>
        </div>
    </div>
</template>

<script>
    import { Cell, Toast, Range, Checklist} from 'mint-ui';

    export default {
        name: 'Storagedetail',
        component: {
            Range,
            Checklist,
            Cell
        },
        data() {
            return {
                rangeValue: 0,
                numbers: 1,
                insurance: true
            }
        },
        methods: {
// 数量加
            addNumber() {
                this.numbers++
            },

            // 数量减
            reduceNumber() {
                if (this.numbers > 1) {
                    this.numbers--
                } else {
                    this.numbers = 1
                    Toast('受不了了，宝贝不能再少了')
                }
            },
        }
    }
</script>

<style scoped lang='scss'>
    .storage-detail-img {
        width: 100vw;
        height: 45vw;
    }

    .storage-detail-name {
        background: white;
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        padding: 3vw 6vw;
    }

    .storage-detail-title {
        font-size: .9rem;
        font-weight: bold;
    }

    .storage-detail-information {
        margin-top: 10px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .storage-detail-information-price {
        display: flex;
        font-size: .7rem;
        color: $primaryColor;
    }

    .storage-detail-information-num {
        color: #B5B5B5;
        font-size: .6rem;
    }

    .storage-detail-content {
        margin-top: 10px;
        background: white;
        padding: 3vw 6vw;
    }

    .storage-detail-content-head {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    .storage-detail-content-head-title {
        font-size: .7rem;
        font-weight: bold;
    }

    .storage-detail-content-head-content {
        display: flex;
        flex-direction: row;
        align-items: center;
        border: 1px solid #B5B5B5;
        border-radius: 3px;
        padding: 3px 8px;
    }

    .storage-detail-content-head-num {
        font-size: .6rem;
        color: $primaryColor;
    }

    .storage-detail-content-head-img {
        width: .6em;
        height: .6rem;
        margin-left: 3px;
    }

    .reduce-opacity {
        opacity: 0.4;
    }

    .info-body {
        margin-top: 10px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #EEEFF2;
        border-bottom: 1px solid #EEEFF2;
        padding: 15px 0;

        p {
            font-size: 0.7rem;
            color: rgba(41, 43, 45, 1);
            line-height: 0.8rem;
            padding: 0;
            margin: 0;
            font-weight: bold;
        }

        div.ui-number {
            height: 1.5rem;
            display: flex;
            border-radius: 0.15rem 0 0 0.15rem;

            input,
            div {
                height: 1.4rem;
                line-height: 1.4rem;
                text-align: center;
                color: #404245;
                display: inline-block;
                padding: 0;
                margin: 0;
                border: 0;
                outline-offset: 0;
            }

            .ui-common {
                line-height: 1.4rem;
                width: 1.4rem;
                height: 1.4rem;
                border: 1px solid #c7c7cd;
                cursor: pointer;
            }

            .reduce {
                border-right: 0;
            }

            .reduce-opacity {
                opacity: 0.4;
            }

            .add {
                border-left: 0;
            }

            input[type='number'] {
                width: 2rem;
                border: 1px solid #c7c7cd;
                border-radius: 0;
                border-image-width: 0;
                box-shadow: 0;
                vertical-align: bottom;

                &:focus {
                    outline: none;
                }
            }
        }
    }

    .detail-num {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .detail-num-font {
        font-size: .6rem;
        color: #b5b5b5;
    }

    /deep/ .mint-cell-wrapper {
            padding: 0 ;
            border: none;
    }

    /deep/ .mint-checklist-label{
        padding: 0 ;
    }

    .self-check{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #EEEFF2;
    }
    .self-check-price{
        position: relative;
        top: 3px;
        font-size: .7rem;
        color: $primaryColor;
    }
    /deep/ .mint-cell{
        display: inline;
    }
    /deep/ .mint-cell-wrapper{
        border-bottom: 1px solid #EEEFF2;
    }
    .storage-detail-total{
        font-size: .9rem;
        color: $primaryColor;
        text-align: center;
        font-weight: bold;
        padding-top: 15px;
    }
    .storage-title-main{
        font-size: .8rem;
        font-weight: bold;
        text-align: center;
        height: 40px;
        line-height: 40px;
    }
    .storage-detail-main{
        background: white;
        padding: 3vw 6vw;
    }
    .storage-detail-describe{
        font-size: .7rem;
        color: #B5B5B5;
        padding: 20px 0;
        border-bottom: 1px solid #EEEFF2;
    }



</style>
